<template>
  <div class="order">
    <!-- top -->
    <div class="order-top">
      <div class="title">已下单的菜</div>
      <div class="order-info">
        <div class="number">桌号 {{info.seat_num}}</div>
        <div class="people">人数 {{info.person_num}}</div>
        <div class="time">下单时间 {{orderTime}}</div>
      </div>
      <div class="order-price">
        <div class="price">应付：￥{{info.total_amount | warpPrice}}</div>
        <div class="pay" @click="test">立即支付</div> 
        <!-- <router-link tag="div" to="/payPage" class="pay">立即支付</router-link>  -->
      </div>
    </div>

    <!-- 茶位 -->
    <!-- <div class="caiwei">
      <div class="caiwei-count">
        <div class="type">菜品</div>
        <div class="count-quantity">2份</div>
      </div>
      <div class="caiwei-botom">
        <div class="caiwei-left">
          <div class="text">茶位</div>
          <div class="price">￥12</div>
        </div>
        <div class="quantity">2份</div>
      </div> 
    </div> -->

    <!-- 商品列表 -->
    <div class="shop-list-box">
      <div class="shop-count">
        <div class="type">菜品</div>
        <div class="count-quantity">{{info.total_num}}份</div>
      </div>
      <div class="shop-list" v-for="(item,index) in shopList" :key="index">
        <div class="shop-list-left">
          <div class="shop-image">
            <img :src="item.thumb_url" class="avatar">
            <!-- <span>用户名称称</span> -->
          </div>
          <div class="shop-info">
            <div class="shop-name">{{item.goods_name}}</div>
            <div style="width:100px;text-align:left;font-size:14px">{{item.goods_spu_name}}</div>
            <div class="shop-price">￥{{item.unit_price}}</div>
          </div>
        </div>
        <div class="shop-list-right">
          <div class="num">{{item.num}}份</div>
        </div>
      </div>
    </div>

    <!-- 刷新 -->
    <!-- <div class="refresh">
      <img src="../../assets/images/refresh.png">
    </div> -->

    <!-- 底部导航 -->
    <div class="bottom-nav">
      <router-link tag="div" to="/home" class="bottom-nav-menu" >
        <img src="../../assets/images/menu.png">
        <span>继续点菜</span>
      </router-link>
    </div>
    <div class="mask-img"></div>
    <div class="mask"></div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data(){
    return {
      orderDetail:[],
      orderTime:'',
      info: '',
      shopList: []
    }
  },
  filters:{
    warpPrice(value){
      if(value){
        return value.toFixed(2)
      }
    }
  },
  computed: {
    
  },
  watch:{
    orderDetail(){
      this.orderTime = this.orderDetail.created_at.split(' ')[1];
    }
  },
  mounted(){
    this.getOrderDetail();
    this.$currency.delCookie('zhuoNum');
    this.$currency.delCookie('shopCarNum');
  },
  methods:{
    test(){
      Toast({ message: '暂不支持线上支付,请联系服务员' ,duration: 1500});
    },
    //获取订单详情
    async getOrderDetail(){
      Toast.loading({   mask: true,   message: '加载中...' });
      let params = {
        order_num:this.$currency.getCookie('orderNum')
      }
      let res = await this.$api.getOrderDetail(params);
      Toast.clear();
      if(res.level == "success"){
        this.orderDetail = res.data[res.data.length - 1];
        res.data.forEach((item,index)=>{
          this.shopList = this.shopList.concat(item.order_item);
        })
        this.info = res.info;
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
  }
}
</script>
<style lang='scss' scoped>
  .order{
    min-height: 100vh;
    padding: 18px 18px 88px;
    position: relative;
    .mask-img{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url(../../assets/images/bg_meishi.jpg);
      filter: blur(34px);
      z-index: -2;
    }
    .mask{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(151, 148, 148, 0.7);
      z-index: -1;
    }
    .order-top{
      background-color: #fff;
      border-radius: 4px;
      padding: 0 20px;
      .title{
        height: 80px;
        line-height: 80px;
        text-align: center;
        font-size: 34px;
      }
      .order-info{
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #aaa;
        font-size: 12px;
        border-bottom: 1px #ccc solid;
        padding: 10px 0;
        position: relative;
        .people{
          position: absolute;
          left: 50%;
          width: 140px;
          margin-left: -70px;
          text-align: center;
        }
      }
      .order-price{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        line-height: 60px;
        padding: 20px 0;
        .price{
          color: #d94445;
          font-size: 32px;
        }
        .pay{
          width: 280px;
          background-color: #d94445;
          text-align: center;
          color: #fff;
          border-radius: 6px;
        }
      }
    }
    .caiwei{
      margin-top: 20px;
      background-color: #fff;
      border-radius: 4px;
      padding: 0 20px;
      .caiwei-count{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        line-height: 60px;
        padding: 10px 0;
        font-size: 32px;
        border-bottom: 1px #ccc solid;
      }
      .caiwei-botom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        .text{
          font-size: 28px;
          line-height: 50px;
        }
        .price{
          color: #d94445;
        }
        .quantity{
          font-size: 28px;
        }
      }
    }
    .shop-list-box{
      margin-top: 20px;
      background-color: #fff;
      border-radius: 4px;
      padding: 0 20px;
      .shop-count{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        line-height: 60px;
        padding: 10px 0;
        font-size: 32px;
        border-bottom: 1px #ccc solid;
      }
      .shop-list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px #cccc solid;
        .shop-list-left{
          display: flex;
          justify-content: center;
          align-items: center;
          .shop-image{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .avatar{
              width: 120px;
              height: 120px;
              border-radius: 50%;
            }
            // span{
            //   width: 110px;
            //   line-height: 50px;
            //   overflow: hidden;
            //   text-overflow:ellipsis;
            //   white-space: nowrap;
            //   font-size: 24px;
            // }
          }
          .shop-info{
            margin-left: 30px;
            .shop-name{
              width: 260px;
              font-size: 32px;
              line-height: 60px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              text-align: left;
            }
            .shop-price{
              width: 180px;
              line-height: 60px;
              color: #d94445;
              font-size: 28px;
              text-align: left;
            }
          }
        }
        .shop-list-right{
          display: flex;
          justify-content: center;
          align-items: center;
          .num{
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 28px
          }
        }
      }
    }
    .refresh{
      position: fixed;
      top:18px;
      right: 18px;
      width: 70px;
      height: 70px;
      background-color: rgba(0,0,0,.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 35px;
        height: 35px;
        border-radius: 50%;
        cursor: pointer;
      }
    }
    .bottom-nav{
      position: fixed;
      bottom: 20px;
      right: 20px;
      .bottom-nav-menu{
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background-color: rgba(253, 5, 5 ,.7);
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 4px solid #fff;
        padding: 12px;
        font-size: 24px;
        img{
          width: 50px;
          height: 50px;
        }
      }
    }
  }
</style>